<template>
	<view class="content">
		<view class="tips">
			提醒：请如实填写您要曝光的信息，不得恶意编造。
		</view>
		<view class="table">
			<view class="table-item">
				<view class="table-item-text">
					<span>曝光时间</span>
					<view class="item-text">
						<input type="text" disabled :value="dataList.createdAt?dataList.createdAt.slice(0,10):''" placeholder="[选填]曝光时间"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>曝光类型</span>
					<view class="item-text">
						<input type="text" disabled :value="dataList.type!==1?dataList.type!==2?'恶意领养':'欺诈骗钱':'恶意送养'" placeholder="曝光类型"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>真实姓名</span>
					<view class="item-text">
						<input type="text" disabled v-model="dataList.name" placeholder="[选填]被曝光人真实姓名"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>地区</span>
					<view class="item-text">
						<input type="text" disabled v-model="dataList.city" placeholder="[选填]被曝光人地区"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>手机号</span>
					<view class="item-text">
						<input type="text" disabled :value="dataList.phone" placeholder="[选填]被曝光人手机号码"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>微信号/QQ/微博/闲鱼</span>
					<view class="item-text">
						<input type="text" disabled :value="dataList.socialAccount" placeholder="[选填]被曝光人社交帐号"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>身份证号</span>
					<view class="item-text">
						<input type="text" disabled :value="dataList.idCard" placeholder="[选填]被曝光人身份证号码"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-cloum">
					<span>* 聊天截图</span>
					<view class="addPload-waik">
						<view class="addPload" v-for="(item,index) in fileList" :key="index">
							<view class="addItems">
								<image :src="item" @click="seek(index)"/>
							</view>	
						</view>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-cloum">
					<span>视频证据</span>
					<view class="addPload-waik">
						<view class="addPload" v-for="(item,index) in srcList" :key="index" v-if="item !== ''">
							<view class="addItems">
								<video :src="item" id="video_play" @play="playVedio"></video>
							</view>	
						</view>
					</view>
				</view>
			</view>
			<view class="table-item" :style="dataList.isOwner == 1?'margin-bottom: 200rpx;':''">
				<view class="table-cloum">
					<span>* 事件陈述</span>
					<textarea disabled :value="dataList.reason" placeholder="请详细陈述具体事件的过程..." />
				</view>
			</view>
			<view class="button" v-if="dataList.isOwner == 1">
				<u-button @click="del">删除</u-button>
				<u-button @click="goUpdate">编辑</u-button>
				<u-button type="warning" @click="goIndex">返回首页</u-button>
			</view>
		</view>
	</view>
</template>

<script>
// import hUpload from "@/components/h-upload/h-upload.vue"
export default {
	//  components: {
	// 	hUpload,
	// }, 
	data() {
		return {
			fileList: [],
			srcList: [],
			action: this.commonApi.petAvatar,
			active: 1,
			options: {},
			dataList: {}
		}
	},
	methods:{
		goIndex(){
			uni.switchTab({
				url: '../../../pages/index/index'
			})
		},
		seek(index){
			uni.previewImage({
				urls: this.fileList,
				current: index
			})
		},
		goUpdate(){
			uni.navigateTo({
				url: './examine?id='+this.dataList.id
			})
		},
		getData(){
			let self = this
			self.$request(self.commonApi.adoptExposure+self.options.id,'GET').then(res=>{
				self.dataList = res.data.data
				self.fileList = res.data.data.images.split(',')
				self.srcList = res.data.data.videos.split(',')
			})
		},
		del(){
			this.$request(this.commonApi.exposureDelete+this.dataList.id,'POST').then(res=>{
				uni.showToast({
					title:'删除成功',
					duration:1500,
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},500)
			})
		}
	},
	onLoad(option) {
		this.options = option
		this.getData()
	}
};
</script>

<style lang="scss" scoped>
	.addPload-waik{
		width: 100%;
		// min-height: 210rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: -20rpx;
		.addItem{
			width: 210rpx;
			height: 210rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			border: 2px dashed #f2f2f2;
			margin-right: 20rpx;
			margin-top: 20rpx;
			
		}
	}
	.addPload{
		width: 210rpx;
		// min-height: 210rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 20rpx;
		margin-top: 20rpx;
		.addItems{
			width: 210rpx;
			height: 210rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// padding: 2px 0;
			video{
				width: 210rpx;
				height: 210rpx;
				border-radius: 20rpx;
			}
			image{
				width: 210rpx;
				height: 210rpx;
				border-radius: 20rpx;
			}
		}
		
	}
	.styleCss{
		width: 660rpx;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 100;
	}
	.table-cloum{
		width: 700rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		span{
			width: 100%;
			padding: 35rpx 0 25rpx 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
		textarea{
			width: 660rpx;
			height: 160rpx;
			background: #f6f6f6;
			padding: 20rpx;
			border-radius: 20rpx;
		}
	}
	.item-text{
		width: calc(100% - 310rpx);
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		input{
			width: 400rpx;
			text-align: right;
		}
	}
	.table-item-text{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		span{
			width: 310rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.item-right2{
		background: #FFCC00;
		color: white;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	.item-right{
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #5A5A5A;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.table-item-right{
		width: calc(100% - 180rpx);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.table-item-nik{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		span{
			width: 180rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.table-item{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
	}
	.table{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #f2f2f2;
		padding-top: 10rpx;
	}
	.tips{
		width: 100%;
		padding: 20rpx;
		background: #fff9ec;
		line-height: 45rpx;
		font-size: 28rpx;
		color: #e6c062;
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
